<template>
  <div class="container">
    <n-page-header title="我的话题" @back="router.back" />

    <div class="topic-list">
      <n-list>
        <n-list-item v-for="(item, index) in topicList" :key="item.id" @click="toTopicDetail(item.id)" :ref="setItemRef">
          <n-thing class="topic-item">
            <template #header>
              {{item.title}}
            </template>

            <template #header-extra>
              <n-p depth="3" v-if="item.status === 1">已关闭</n-p>
            </template>

            <template #description>
              <n-p depth="3">
                {{item.content}}
              </n-p>
            </template>

            <template #footer>
              <n-p depth="3">{{item.date}}</n-p>
            </template>
          </n-thing>
        </n-list-item>
      </n-list>
      <div class="list-status">
        <div class="list-loading" v-if="requesting">
          <n-spin :size="18" />
        </div>
        <div class="list-no-more" v-if="noMore">
          <n-p depth="3">没有更多了</n-p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {useRouter} from "vue-router";
import {useRequests} from "@/common/requests.js";
import {useMessage, useNotification} from "naive-ui";
import {ref, nextTick} from "vue";
import {useIntersectionObserver} from "@vueuse/core";

const router = useRouter()
const requests = useRequests()
const message = useMessage()
const notify = useNotification()


const topicList = ref([])
const topicItemRef = ref([])
const setItemRef = el => {
  topicItemRef.value.push(el)
}

const page = ref({
  page: 0,
  offset: 20
})
const noMore = ref(false)
const requesting = ref(false)
const fetchTopicList = refresh => {
  if (requesting.value) {
    return false
  }

  requesting.value = true
  if (refresh) {
    topicItemRef.value = []
    noMore.value = false
    page.value.page = 0
  }

  page.value.page ++
  requests.topic.listMine(page.value).then(resp => {
    requesting.value = false
    if (resp.ret === 0) {
      if (refresh) {
        topicList.value = resp.data
      } else {
        topicList.value.push(...resp.data)
      }

      if (resp.data.length < page.value.offset) {
        noMore.value = true
      } else {
        nextTick(() => {
          const item = topicItemRef.value[topicItemRef.value.length - 2]
          const { stop } = useIntersectionObserver(item, ([{ isIntersecting }]) => {
            if (isIntersecting) {
              stop()
              fetchTopicList()
            }
          })
        })
      }
    } else {
      message.error(resp?.data ?? resp?.msg ?? '未知错误')
    }
  }).catch(err => {
    requesting.value = false

    console.log(err)
    notify.error({content: "出错了", meta: err.toString(), duration: 1500})
  })
}

fetchTopicList()
const toTopicDetail = id => {
  router.push({name: 'TopicDetailView', params: {id}})
}
</script>

<style lang="scss" scoped>
.container {
  .topic-list {

    .topic-item {
      cursor: pointer;
    }

    .list-status {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
